<template>
  <div class="back" style=" height: calc(100vh - 100px)">
    <div style="height: 50px;"></div>
    <el-table v-loading="loading" :data="bookingList">
      <el-table-column label="编号" align="center" prop="id"/>
      <el-table-column label="用户" align="center" prop="userName"/>
      <el-table-column label="预约时间" align="center" prop="createTime"/>
      <el-table-column label="活动" align="center" prop="goodsName">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="chakan(scope.row)"
          >查看活动详情
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
          >取消预约
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="酒店详情" :visible.sync="open" width="80%" append-to-body>
      <el-table v-loading="loading" :data="goodsDetails">
        <el-table-column label="名称" align="center" prop="goodsName" show-overflow-tooltip/>


        <el-table-column label="图片" align="center" width="180">
          <template slot-scope="scope">
            <!--            <div v-if="!scope.row.goodsInfo.goodsPic">暂无图像</div>-->
            <div>
              <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.goodsImg.split(',')[0]"
                  :preview-src-list="scope.row.goodsImg.split(',')">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" prop="details" width="180" show-overflow-tooltip/>
        <el-table-column label="价格" align="center" prop="price"/>
        <el-table-column label="预约时间" align="center" prop="createTime" show-overflow-tooltip/>
        <!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
        <!--          <template slot-scope="scope">-->

        <!--            <el-button-->

        <!--                size="mini"-->
        <!--                type="text"-->
        <!--                @click="pingjia(scope.row)"-->
        <!--            >评价-->
        <!--            </el-button>-->


        <!--          </template>-->
        <!--        </el-table-column>-->

      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {getList,delById} from '@/api/project/booking'

export default {
  name: "index",

  data() {
    return {
      bookingList: [],
      goodsDetails: [],
      userInfo:{},
      open: false
    }
  },

  created() {

    this.getList()
  },


  methods: {

    getList() {
      getList().then(res => {

        this.userInfo=JSON.parse(localStorage.getItem("userInfo"))
        let list  = res.data.filter(data => data.userId==this.userInfo.id );
        this.bookingList = list
      })
    },
    chakan(e) {
      this.goodsDetails = this.bookingList.filter(item => item.id === e.id)

      this.open = true
    },

    handleDelete(e) {
      this.$confirm('是否确认取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delById(e.id)

        console.log(e)
        this.$message({
          type: 'success',
          message: '预约取消成功!'
        });

        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },


  }
}
</script>

<style scoped>
.back{
  background-image: url('../../assets/bg.png');
  background-size: cover;
}

</style>